<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    {#    <link rel="prefetch" href="https://www.baidu.com">#}

    <style>
{#        thead th {
  text-align: left;
  background: grey;
  color: white
}
        tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}#}
        thead th,
    tfoot th {
      text-align: center;
      background: #FE6A00;
      color: white
    }
    tbody th {
      text-align: center;
      background: lightgrey;
      color: grey;
    }
    tbody td {
      text-align: center;
    }
    thead [colspan],
    tfoot [colspan] {
      text-align: center;
    }
    #first,
    #second {
      background: #FAEBD7;
      color: #FE6A00;
    }
    #colgroup1 {
  background-color: red
}

#colgroup2 {
  background-color: green;
  font-size: small
}
    </style>
</head>
<body>

<form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name:
      <input type="text" required id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password:
      <input type="password" required placeholder="Min 6  characters" id="password"
        name="password" />
      </label>
    </p>
    <p>
      <label for="accept">
      <input type="checkbox" required id="accept" name="accept" /> Accept Terms & Conditions
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>

<form onsubmit="return false"
    oninput="res.value = quant.valueAsNumber *  price.valueAsNumber">
    <fieldset>
      <legend>Price Calculator</legend>
      <input type="number" placeholder="Quantity" id="quant" name="quant" />
      x <input type="number" placeholder="Price" id="price" name="price" />
      =
      <output for="quant name" name="res" />
    </fieldset>
  </form>
<form method = "post" action = "http://example.com/form">
    <p>
      <textarea cols = "20" rows = "5" wrap = "hard" id = "story" name = "story">
      Say something
      </textarea>
      <input type = "submit" value = "Submit" />
    </p>
  </form>
<form action="" method="get" name="frmInfo">
    Please select the product you are interested in:<br /> <select
      name="selInformation">
      <option disabled="disabled" value="">-- Hardware --</option>
      <option value="Desktop">Desktop computers</option>
      <option value="Laptop">Laptop computers</option>
      <option disabled="disabled" value="">-- Software --</option>
      <option value="OfficeSoftware">Office software</option>
      <option value="Games">Games</option>
      <option disabled="disabled" value="">-- Peripherals --</option>
      <option value="Monitors">Monitors</option>
      <option value="InputDevices">Input Devices</option>
      <option value="Storage">Storage</option>
    </select> <br />
    <br />
    <input type="submit" value="Submit" />
  </form>

<form action="" method="get" name="frmInfo">
    Please select the product you are interested in:<br /> <select
      name="selInformation">
      <option disabled="disabled" value="">-- Hardware --</option>
      <option value="Desktop">Desktop computers</option>
      <option value="Laptop">Laptop computers</option>
      <option disabled="disabled" value="">-- Software --</option>
      <option value="OfficeSoftware">Office software</option>
      <option value="Games">Games</option>
      <option disabled="disabled" value="">-- Peripherals --</option>
      <option value="Monitors">Monitors</option>
      <option value="InputDevices">Input Devices</option>
      <option value="Storage">Storage</option>
    </select> <br />
    <br />
    <input type="submit" value="Submit" />
  </form>
    <form method="post" action="http://example.com/form">
    <p>
      <label for="fave" style="vertical-align: top"> Favorite
        Fruit: <select id="fave" name="fave">
          <optgroup label="Top  Choices">
            <option value="apples" label="Apples">Apples</option>
            <option value="oranges" label="Oranges">Oranges</option>
          </optgroup>
          <optgroup label="Others">
            <option value="cherries" label="Cherries">Cherries</option>
            <option value="pears" label="Pears">Pears</option>
          </optgroup>
      </select>
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>

<form method="post" action="http://example.com/form">
    <p>
      <label for="fave" style="vertical-align: top"> Favorite
        Fruit: <select id="fave" name="fave" size="5" multiple>
          <option value="a" selected label="Apples">Apples</option>
          <option value="o" label="Oracle">Oracle</option>
          <option value="c" label="C">C</option>
          <option value="p" label="Pascal">Pascal</option>
      </select>
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>

<form method="post" action="http://example.com/form">
    <p>
      <label for="fave"> Favorite Fruit:
      <select id="fave"name="fave">
          <option value="A" selected label="Apples">Apples</option>
          <option value="B" label="Batch">Batch</option>
          <option value="C" label="C">C</option>
          <option value="S" label="SQL">SQL</option>
      </select>
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>

<form method="post" action="http://example.com/form"
    enctype="multipart/form-data">
    <p>
      <input type="file" multiple name="filedata" />
    </p>
    <input type="submit" value="Submit" />
  </form>

<form method="post" action="http://example.com/form"
{#    enctype="multipart/form-data">#}
    <p>
      <input type="file" name="filedata" />
    </p>
    <input type="submit" value="Submit" />
  </form>

<form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p>
    <input type="image" src="accept.png" name="submit" />
  </form>
 <form method="post" action="http://example.com/form">
    <input type="hidden" name="recordID" value="1234" />
    <input type="submit" value="Submit Vote" />
  </form>
<form method="post" action="http://example.com/form">
    <p>
      <label for="search"> Search: <input type="search" id="search"
        name="search" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
<form method="post" action="http://example.com/form">
    <p>
      <label for="color"> Color:
      <input type="color" id="color" name="color" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="lastbuy"> When did you last buy:
      <input type="date" id="lastbuy" name="lastbuy" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>

<form method="post" action="http://example.com/form">

    <p>
      <label for="url"> Your homepage: <input type="url" id="url"
        name="url" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
    <form method="post" action="http://example.com/form">

    <p>
      <label for="tel"> Tel: <input type="tel"
        placeholder="(XXX)-XXX-XXXX" pattern="(\d{3})-\d{3}-\d{4}" id="tel" name="tel" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>

<form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@domain.com" id="email" pattern=".+?@qq.com" name="email" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>
    <form method="post" action="http://example.com/form">
    <p>
    <fieldset>
      <legend>Vote for your favorite fruit</legend>
      <label for="apples">
        <input type="radio" checked value="Apples" id="apples" name="fave" /> Apples
      </label>
      <label for="oranges">
         <input type="radio" value="Oranges" id="oranges" name="fave" /> Oranges
      </label>
      <label for="cherries">
         <input type="radio" value="Cherries" id="cherries" name="fave" /> Cherries
      </label>
    </fieldset>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="veggie"> Are you vegetarian:
      <input type="checkbox" id="veggie" name="veggie" />
      </label>
    </p>
    <p>
    Which of the following skills do you possess? Select all that apply.<br />
    <input checked type="checkbox" name="chkSkills" value="html" />HTML <br />
    <input type="checkbox" name="chkSkills" value="xhtml" />XHTML <br />
    <input type="checkbox" name="chkSkills" value="CSS" />CSS<br />
    <input checked type="checkbox" name="chkSkills" value="JavaScript" />JavaScript<br />
    <input type="checkbox" name="chkSkills" value="aspnet" />ASP.Net<br />
    <input checked type="checkbox" name="chkSkills" value="php" />PHP
    </p>
    <input type="submit" value="Submit Vote" />
  </form>

<form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: 1 <input
        type="range" step="1" min="0" max="100" value="1" id="price"
        name="price" />100
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: <input
        type="number" step="2" min="0" max="100" value="1" id="price"
        name="price" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
  </form>



    <form>
        <label>A:<input type="checkbox" id="a" value="q">a</label>
        <label>A:<input type="checkbox" id="a" value="w">b</label>
        <label>A:<input type="checkbox" id="a" value="e">c</label>
        <label>B:<input type="color"></label>
        <label>C:<input type="date"></label>
        <label>D:<input type="datetime-local"></label>
        <label>E:<input type="email"></label>
        <label>F:<input type="month"></label>
        <label>F:<input type="number"></label>
        <label>F:<input type="radio"></label>
        <label>F:<input type="range"></label>
        <label>F:<input type="tel"></label>
        <label>F:<input type="time"></label>
        <label>F:<input type="week"></label><br>
        <label>F:<input type="url"></label>




    </form>

  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name:
      <input value="XML" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password:
      <input type="password" pattern=".{6,10}" placeholder="Min 6 characters" id="password" name="password" />
      </label>

        <br />Another Password:
       <input type="password"
              name="pwdPassword"
              value=""
                  size="20"
                  maxlength="20" /><br />
    </p>
    <p>
      <label for="fave"> Fruit:
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name:
      <input value="XML" id="name" name="name" readonly />
      </label>
    </p>
    <p>
      <label for="password"> Password:
      <input type="password" required placeholder="Min 6 characters" id="password" name="password" />
      </label>

        <br />Another Password:
       <input type="password"
              name="pwdPassword"
              value=""
                  size="20"
                  maxlength="20" /><br />
    </p>
    <p>
      <label for="fave"> Fruit:
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>

<form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" id="name"
        name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password:
      <input type="password" placeholder="Min 6  characters" id="password" name="password" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit:
      <input value="Apples" id="fave" name="fave" />
      </label>
    </p>
    <input type="submit" value="Submit Vote" />
    <input type="reset" value="Reset Form" />
    <input type="button" value="My Button" />
  </form>

    <form action="http://your server/" method="get" name="frmTabExample">
    <input type="checkbox" name="chkNumber" value="1" tabindex="3" /> One<br />
    <input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two<br />
    <input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three<br />
    <input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four<br />
    <input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five<br />
    <input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six<br />
    <input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven<br />
    <input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight<br />
    <input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine<br />
    <input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten<br />
    <input type="submit" value="Submit" />
</form>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p>
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button>Submit Vote</button>
  </form>
    <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input value="XML" disabled
        id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City: <input value="Boston" readonly
        id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: <input id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input placeholder="Your name"
        id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City: <input placeholder="Where you  live"
        id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit: <input list="fruitlist" id="fave"
        name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>

  <datalist id="fruitlist">
    <option value="A" label="First" />
    <option value="B">Second</option>
    <option value="C"/>
  </datalist>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name:
      <input placeholder="Your name" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City:
      <input placeholder="Where you  live" id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit:
      <input value="Apple" id="fave" name="fave" />
      </label>
    </p>
    <button type="submit">Submit Vote</button>
  </form>


     <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name:
      <input maxlength="10" id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="city"> City:
      <input size="10" id="city" name="city" />
      </label>
    </p>
    <p>
      <label for="fave"> Fruit:
      <input size="10" maxlength="10" id="fave" name="fave" />
      </label>
      <button type="submit">Submit Vote</button>
    </p>
  </form>


    <form action="" method="post">
        <button type="submit">Submit</button>
        <br /><br />
        <button type="reset"><b>Clear this form</b> I want to start again</button>
        <br /><br />
        <button type="button"><img src="http://www.www.w3cschool.cn/style/download.png" alt="submit" /></button>
    </form>

      <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p>
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button type="button">
      Do <strong>NOT</strong> press this button
    </button>

    <form>
    <p>
      <label for="fave">Fruit:
      <input autofocus id="fave" name="fave" /></label>
    </p>
    <p>
      <label for="name">Name:
      <input id="name" name="name" /></label>
    </p>
    <button type="submit"
            formaction="http://example.com/form"
          formmethod="post">Submit Vote</button>
  </form>

  <form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset disabled>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <button>Submit Vote</button>
  </form>
<form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend accesskey="y">
        About <u>Y</u>ou (ALT + Y)
      </legend>
      <p><label for="userName">User name:</label>
         <input type="text" name="txtUserName" size="20" id="userName" />
      </p>
    </fieldset>

    <fieldset>
      <legend accesskey="u">
        About <u>U</u>s (ALT + U)
      </legend>
      <p>
        <label for="referrer">How did you hear about us?</label>:<br/>
        <select name="selReferrer" id="referrer">
          <option selected="selected" value="">Select answer</option>
          <option value="website">Another website</option>
          <option value="printAd">Magazine ad</option>
          <option value="friend">From a friend</option>
          <option value="other">Other</option>
        </select>
      </p>
    </fieldset>

    <button>Submit Vote</button>
  </form>

 <form method="post" action="http://example.com/form">
    <fieldset>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="city">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <button>Submit Vote</button>
  </form>

    <form method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input id="fave" name="fave" /></label>
    </p>
    <p>
      <label for="name">Name: <input id="name" name="name" /></label>
    </p>
    <button>Submit Vote</button>
  </form>

    <form id="voteform" method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p>
  </form>
  <p>
    <label for="name">Name: <input form="voteform" id="name"
      name="name" />
    </label>
  </p>
  <button form="voteform" type="submit">Submit Vote</button>
  <button form="voteform" type="reset">Reset</button>

<form name="fruitvote"
        id="fruitvote"
        method="post"
      action="http://example.com/form">
    <input name="fave" />
    <input name="name" />
    <button>Submit Vote</button>
  </form>

<form target="_blank"
        method="post"
        action="http://example.com/form">
    <input autocomplete="on" name="fave" />
    <input name="name" />
    <button>Submit Vote</button>
  </form>

<form autocomplete="off"
        method="post"
        action="http://example.com/form">
    <input autocomplete="off" name="fave" />
    <input name="name" />
    <button>Submit Vote</button>
  </form>

<form method="post" action="http://example.com/form">
    <input name="fave" />
    <input name="name" />
    <button>Submit Vote</button>
  </form>
<form method="post" action="http://example.com/form">
    <input name="name" />
    <button>Submit Vote</button>
  </form>


<table border="1">
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>A</td>
        <td>G</td>
        <td>M</td>
        <td>500</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>O</td>
        <td>O</td>
        <td>L</td>
        <td>450</td>
      </tr>
    </tbody>
  </table>
<table>
    <caption>Results of the Survey</caption>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>500</td>
      </tr>
    </tbody>
  </table>
<table border="1">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2nd Favorite:</th>
        <td>HTML</td>
        <td>HTML</td>
        <td>Oracle</td>
        <td>MySQL</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>XML</td>
        <td colspan="2" rowspan="2">This is a test.</td>
        <td>203</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="5">&copy; 2011 www.w3cschool.cn Enterprises</th>
      </tr>
    </tfoot>
  </table>

<table>
     <table>
    <colgroup id="colgroup1" span="3" />
    <colgroup id="colgroup2" span="2" />
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
        <td>500</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>CSS</td>
        <td>Java</td>
        <td>Javascript</td>
        <td>450</td>
      </tr>
    </tbody>
  </table>


    <thead>
      <tr>
        <th id="time">时间</th>
        <th id="weather">天气</th>
        <th id="temperature">温度/℃</th>
        <th id="wind">风向</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="first">7月24日</th>
        <td headers="weather first">多云</td>
        <td headers="temperatire first">26~37</td>
        <td headers="wind first">南风</td>
      </tr>
      <tr>
        <th id="second">7月25日</th>
        <td headers="weather second">多云</td>
        <td headers="temperatire second">26~36</td>
        <td headers="wind second">南风</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="4">&copy; 2020 www.w3cschool.cn 编程狮</th>
      </tr>
    </tfoot>
  </table>


<table>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th>Size</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Rank Footer</th>
        <th>Name Footer</th>
        <th>Color Footer</th>
        <th>Size Footer</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javacript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>Json</td>
        <td>Text</td>
        <td>CSV</td>
      </tr>
    </tbody>
  </table>


 <table>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>

<table>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Color</th>
      <th>Size</th>
    </tr>
    <tr>
      <th>Favorite:</th>
      <td>Apples</td>
      <td>Green</td>
      <td>Medium</td>
    </tr>
    <tr>
      <th>2nd Favorite:</th>
      <td>Oranges</td>
      <td>Orange</td>
      <td>Large</td>
    </tr>
    <tr>
      <th>3rd Favorite:</th>
      <td>Pomegranate</td>
      <td>A kind of greeny-red</td>
      <td>Varies from medium to large</td>
    </tr>
  </table>


 <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>


 <table>
    <tr>
      <td>A</td>
      <td>G</td>
      <td>M</td>
    </tr>
    <tr>
      <td>O</td>
      <td>O</td>
      <td>L</td>
    </tr>
    <tr>
      <td>E</td>
      <td>Long cell</td>
      <td>V</td>
    </tr>
  </table>
<table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
{#<a href="http://www.w3cschool.cn" target="myframe">Tutorial</a>#}
  <iframe src="http://www.w3cschool.cn" name="myframe" width="300" height="300"> </iframe>

  <p>
    <a href="//www.w3cschool.cn/page.html">
       <img ismap src="http://www.www.w3cschool.cn/style/download.png"/>
    </a>
  </p>

<img src="http://www.www.w3cschool.cn/style/download.png"
       alt="Triathlon Image"
       width="200"
       height="67" />

  I like XML and CSS.
  <figure>
    <figcaption>Listing 01. Using the code element</figcaption>
    <code>
      var fruits = ["CSS", "HTML", "CSS", "Javascript"];<br>
      document.writeln("I like " + fruits.length + " fruits");
    </code>
  </figure>
  I like:
  <dl>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd><i>a style sheet language used for
           describing the look and formatting
           of a document written in a markup language</i></dd>

    <dt>HTML</dt>
    <dd>The mark language</dd>

    <dt>Javascript</dt>
    <dd>The coding logic</dd>
  </dl>

<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>

<ol type="A" start="4">
    <li>Point number one</li>
    <li>Point number two</li>
    <li>Point number three</li>
</ol>

<p>
    This is a test: Super
  <wbr>
  loooooooooooooooooooooooooong
  <wbr>
  word.
</p>
This is a <var>variable</var>.
 <u>HTML5</u> is good.
<div>
    I bought a book at
  <time datetime="15:00">3 o"clock</time>
  on
  <time datetime="2012-12-7">December 7th</time>
  .
</div>

The point x<sub>10</sub> is the 10<sup>th</sup> point.
<strong>Warning:</strong> HTML5 is good.
HTML5 is <small>good</small>.
This is a <samp>sample</samp>.
HTML is now <s>HTML4</s> HTML5.
<p>I like
  <ruby>
    CSS
    <rp>(</rp>
    <rt>Cascading Style Sheets</rt>
    <rp>)</rp>
  </ruby>

  </p>
<p>
    I like <mark>CSS</mark>.
  </p>
This is an <kbd>input</kbd>.
<p>
    <ins>I like <mark>HTML</mark>.</ins>
  </p>
<em>I</em> like <b>HTML</b> and <b>CSS</b>.
My favorite is <i>Javascript</i>.

<em>I</em> like <b>HTML</b> and <b>CSS</b>.
<p>

    The <dfn title="Cascading Style Sheets">CSS</dfn>
    is a style sheet language used for describing the
    look and formatting of a document written in a markup language.
</p>
<p>
    <ins>I like
        <del>HTML</del>
        .
    </ins>
</p>
This is a <code>test</code>.
My favorite is <cite>CSS</cite> by http://en.wikipedia.org.
I like
<br/> HTML,
<br/> CSS,
<br> Javascript.
<p>
    This is left-to-right:
    <bdo dir="ltr">This is a test</bdo>
</p>
<p>
    This is right-to-left:
    <bdo dir="rtl">This is a test</bdo>
</p>
<p>
    <bdi>abcd</bdi>
</p>
I like <b>HTML</b> and <b>CSS</b>.
<address>
    Questions and comments? <a href="mailto:info@example.com">Email me</a>
</address>
<div>The <abbr title="Cascading Style Sheets">CSS</abbr>
    is a style sheet language used for describing the
    look and formatting of a document written in a markup language.
</div>

<div id=app">
    <label>用户名：<input disabled="disabled">
        <video typeof=""></video>
        <object></object>
        <audio></audio>
        <embed>
        <div>
            <code>ss</code>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
            <ol>
                <li>2</li>
                <li>2</li>
                <li>2</li>
            </ol>
            <dt>
                <dl>4</dl>
                <dl>4</dl>
                <dl>4</dl>
            </dt>
        </div>
        <div id="box">
            <table border="1" align="left" width="100px" height="200px">
                {#                <caption>电话电话</caption>#}
                <p align="center">好时机</p>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>book</th>
                </tr>
                <tr>
                    <td>yang</td>
                    <td>19</td>
                    <td>三国演义</td>
                </tr>

            </table>

        </div>

</div>


</body>
<style>
    body {
        background-color: darkcyan;
    }

    #app {
        background-color: red;

    {#width: 3000px;#} height: 3000px;

    }

    #box {
        background-color: cornflowerblue;
        width: 800px;
        height: 500px;
        right: 9px;


    }

</style>
</html>